import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { ScrollView, View, StyleSheet } from 'react-native';
import { Button, List, ListItem, CheckBox } from 'react-native-elements';
import { propType, filter } from 'graphql-anywhere';
import { primaryColor, toast } from './utils';
import OrderPricingTable from './components/OrderPricingTable';
import OrderShipping from './components/OrderShipping';
import OrderConfirmButton from './components/OrderConfirmButton';
import Loader from './widgets/Loader';

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  bottom: {
    height: 100
  }
});

class CheckoutOverviewPage extends Component {
  static navigationOptions = ({navigation, screenProps}) => {
    return {
      title: `${screenProps.chinese?'总览':'Review'}${(navigation.state.params.stepper.length.length>1)?` (${navigation.state.params.stepIndex+1}/${navigation.state.params.stepper.length})`:''}`,
    };
  }
  componentDidMount() {
    if (this.props.orderPricing) {
      this.props.navigation.setParams({toPayPrice: this.props.orderPricing.toPayPrice});
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.orderPricing&&(nextProps.orderPricing!=this.props.orderPricing)) {
      this.props.navigation.setParams({toPayPrice: nextProps.orderPricing.toPayPrice});
    }
  }
  onUpdatePickupNote = () => {
    const navigation = this.props.navigation;
    navigation.navigate('OrderNote', {select: navigation.state.params.pickupNote, onSelect: (note) => {
      setTimeout(() => navigation.setParams({
        pickupNote: note
      }), 100);
    }})
  }
  onUpdateDeliveryNote = () => {
    const navigation = this.props.navigation;
    navigation.navigate('OrderNote', {select: navigation.state.params.deliveryNote, onSelect: (note) => {
      setTimeout(() => navigation.setParams({
        deliveryNote: note
      }), 100);
    }})
  }
  onTogglePickupCalendar = () => this.props.navigation.setParams({pickupCalendar: this.props.navigation.state.params.pickupCalendar?false:true})
  onToggleDeliveryCalendar = () => this.props.navigation.setParams({deliveryCalendar: this.props.navigation.state.params.deliveryCalendar?false:true})
  render() {
    const { loading, orderPricing, payment, pickup, delivery } = this.props;
    const { orderId, pickupNote, deliveryNote, type, displayId,
      pickupCalendar, deliveryCalendar } = this.props.navigation.state.params;
    const { chinese } = this.props.screenProps;
    if (loading&&!orderPricing&&!payment&&!pickup&&!delivery) return <Loader/>;

    return (
      <View style={styles.container}>
        <View style={styles.container}>
          <ScrollView removeClippedSubviews={true}>
            {displayId&&<List><ListItem title={`#${displayId}`} hideChevron/></List>}
            {orderPricing&&<OrderPricingTable chinese={chinese} pricing={filter(OrderPricingTable.fragments.pricing, orderPricing)}/>}
            {pickup&&<OrderShipping localTitle={chinese?'取件':'Pickup'} chinese={chinese} onUpdateNote={this.onUpdatePickupNote}
              shipping={filter(OrderShipping.fragments.shipping, pickup)} selectNote={pickupNote}/>}
            {delivery&&<OrderShipping localTitle={chinese?(type==='aircon'?'服务':'递送'):(type==='aircon'?'Service':'Delivery')} chinese={chinese} onUpdateNote={this.onUpdateDeliveryNote}
              shipping={filter(OrderShipping.fragments.shipping, delivery)} selectNote={deliveryNote}/>}
            <View style={styles.bottom}/>
          </ScrollView>
        </View>
        <OrderConfirmButton navigation={this.props.navigation} chinese={chinese}/>
      </View>
    );
  }
}

export default graphql(gql`
  query OverviewPage($orderId:String,$type:String,$pickup:ShippingInput!,$delivery:ShippingInput!,
    $items:[OrderItemInput],$voucherId:String,$topUpId:String,$promoCodeId:String,
    $loadPickup:Boolean!,$loadDelivery:Boolean!) {
      
    orderPricing(orderId:$orderId,type:$type,pickup:$pickup,delivery:$delivery,items:$items,
      voucherId:$voucherId,promoCodeId:$promoCodeId,topUpId:$topUpId) {
      toPayPrice
      ...OrderPricingTable
    }
    pickup:orderShipping(input:$pickup) @include(if:$loadPickup) {
      ...OrderShipping
    }
    delivery:orderShipping(input:$delivery) @include(if:$loadDelivery) {
      ...OrderShipping
    }
  }
  ${OrderPricingTable.fragments.pricing}
  ${OrderShipping.fragments.shipping}
`, {
  options: ({navigation:{state:{params:{topUpId, orderId, type, pickupDate,
    deliveryDate, payment, items, voucherId, promoCodeId, addressId, deliveryAddressId,
    pickupFlexible, dropOffFlexible, pickupNote, deliveryNote, express, stepper}}}}) => {
    return {
      variables: {
        topUpId,
        orderId,
        type,
        payment,
        items,
        voucherId,
        promoCodeId,
        pickup: {
          date: pickupDate||deliveryDate,
          addressId,
          flexible: dropOffFlexible,
          note: pickupNote
        },
        delivery: {
          date: deliveryDate,
          addressId: deliveryAddressId||addressId,
          express,
          flexible: pickupFlexible,
          note: deliveryNote
        },
        loadPickup: !topUpId&&['laundry','premiumlaundry'].indexOf(type)>=0,
        loadDelivery: !topUpId
      }
    };
  },
  props: ({data: {orderPricing, pickup, delivery, payment, loading}}) => {
    return {
      orderPricing,
      pickup,
      delivery,
      payment,
      loading
    };
  }
})(CheckoutOverviewPage);
